<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 组件调用 驼峰的组件headCom改为 head-com -->
    <head-com></head-com>
    <h1> {{msg}}</h1>

  </div>
  <hr>
  <div id="con">
    <head-com></head-com>
    <h1> {{num}}</h1>
  </div>
  <!-- 全局组价模板部分 -->
  <!-- template 模板必须用一个元素包裹 一般是空div包裹
   -->
  <template id="headTemplate">
    <div>
      <h1 @click="say">公共的头部部分--{{title}}</h1>
      <div>模板必须用一个元素包裹 一般是空div包裹</div>
    </div>
  </template>
  <!--  -->
  <script src="./vue.js"></script>
  <script>
    //vue的组件由  template部分  css部分  js部分 new Vue实例
    //组件（Component）是对数据和方法的简单封装
    // vue的全局组件
    // Vue.component("组件名", { 配置项 })

    // 1.注册全局组件 组件可以采用驼峰命名
    Vue.component("headCom", {
      // template 模板部分 标签部分
      // template: `  
      //     <div>
      //       <h1 @click="say">公共的头部部分--{{title}}</h1>
      //     </div>
      //   `,
      template: "#headTemplate",
      data() {
        return {
          title: "今日头条"
        }
      },
      beforeCreate() {
        console.log("子组件创建前")
      },
      created() {
        console.log("子组件创建后")
      },
      beforeMount() {
        console.log("子组件挂载前")
      },
      mounted() {
        console.log("子组件挂载完成")
      },
      beforeUpdate() {
        console.log("子组件更新前")
      },
      updated() {
        console.log("子组件更新后")
      },
      beforeDestroy() {
        console.log("子组销毁前")
      },
      destroyed() {
        console.log("子组件销毁后")
      },
      methods: {
        say() {
          alert(1111)
        }
      },
      computed: {},
      watch: {}

    })

    //组件首次加载 父子组件的生命周期执行顺序
    // 父组件的创建前-->创建后-->挂载前-->子组件的创建前--》子创建后-->子挂载前--》子挂载后--》父组件挂载完成
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: 111
        }
      },
      beforeCreate() {
        console.log("父组件创建前")
      },
      created() {
        console.log("父组件创建后")
      },
      beforeMount() {
        console.log("父组件挂载前")
      },
      mounted() {
        console.log("父组件挂载后")
      },
      beforeUpdate() {
        console.log("父组件更新前")
      },
      updated() {
        console.log("父组件更新后")
      },
      beforeDestroy() {
        console.log("父组销毁前")
      },
      destroyed() {
        console.log("父组件销毁后")
      },
    })

    // var vm1 = new Vue({
    //   el: "#con",
    //   data() {
    //     return {
    //       num: 888
    //     }
    //   }
    // })
  </script>
</body>

</html>